<!-- 车辆通行走势 -->

<template>
  <div class="ParkingMap-MyTrend">
    <div class="flexCC">
      <div v-for="item in CORE.DICT.CAR_TYPE" :key="item[0]">
        <span :style="`backgroundColor: ${item[2]}`" /><label :style="`color: ${item[2]}`">{{ item[1] }}</label>
      </div>
    </div>

    <WebShow>
      <FormRadio :one="infoParam" bind="direction" :dict="DIRECTION" isBtn noLabel />
    </WebShow>

    <div class="ParkingMap-MyTrend-chart">
      <EasyChart :baseOption="OPTION" :option="option" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import OPTION from './OPTION'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTrend',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixBase('trend'), CORE.mixInfo('trend')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 基础配置
     */
    OPTION: () => OPTION,

    /**
     * 方向
     */
    DIRECTION: () => CORE.DICT.DIRECTION.map(([id, name]) => [id, `${name}场`]),

    /**
     * 图表配置
     */
    option() {
      const { dateType, direction } = this.infoParam
      const directionName = CORE.dict(this.DIRECTION, direction)
      const { xdata = [], content = [] } = this.info
      const [xAxis, lineData, onceData, vipData] = [[], [], [], []]
      const onceMap = (content.find((x) => x.carType === 1 && x.legendName === directionName) || {}).content || {}
      const vipMap = (content.find((x) => x.carType === 2 && x.legendName === directionName) || {}).content || {}
      const barWidth = dateType === 2 ? 16 : 10

      xdata.forEach((x) => {
        xAxis.push(x.slice(-2))
        const onceValue = onceMap[x] || 0
        const vipValue = vipMap[x] || 0
        lineData.push(onceValue + vipValue)
        onceData.push(onceValue)
        vipData.push(vipValue)
      })

      const formatter = ({ dataIndex: i }) => {
        const date = xdata[i].slice(0, 10).replace(/\//g, '-')
        const hour = xdata[i].slice(11)
        const time = hour ? `<br /><label> </label>${hour}:00:00 - ${hour}:59:59` : ''
        const normal = onceData[i]
        const vip = vipData[i]
        return `<div class="ParkingMap-MyTrend-tip">
          <div><label>时间：</label>${date}${time}</div>
          <label>VIP：</label><b>${vip}</b>
          <label>临时车：</label><b>${normal}</b>
        </div>`
      }

      return {
        xAxis: { data: xAxis },
        series: [
          { data: lineData },
          { data: onceData, barWidth, tooltip: { formatter } },
          { data: vipData, barWidth, tooltip: { formatter } },
        ],
      }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听日期类型
     */
    'infoParam.dateType': {
      immediate: true,
      handler() {
        this.startInfo()
      },
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
